<template>
  <div class="template">
     <div class="search">
      <div class="search-center">
        <div class="search-item">
            <Input clearable
            v-model="search.id"
            placeholder="ID"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.nickname"
            placeholder="用户昵称"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.phone"
            placeholder="请输入手机号"
            style="width: 150px;"
            ></Input>
        </div>

         <Button
          style="width: 80px;margin-right: 10px;margin-bottom:5px"
          type="primary"
          icon="ios-search"
          @click="searchFn"
          >查询</Button>
      </div>    
    </div>
    <div class="table">
      <Table
        :columns="diyData.columns"
        :data="apiData.tableList"
      >
        <template slot="footer">
          <Button size="large" @click="$router.go(-1)">返回</Button>
             <Page
            :total="apiData.total"
            show-total
            :page-size="search.pageSize"
            :current="search.pageNo"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            class-name="footer-page"
            show-elevator
            show-sizer
          ></Page>
        </template>
      </Table>
    </div>

  </div>
</template>

<script>
import {apiScoredetailList} from '@/api/user-manage.js'
export default {
  name: 'points-details',
  data () {
    return {
        query:{},
      search: {
        nickname:'',
        phone:'',
        id:'',
        pageNo: 1,
        pageSize: 10,
      },
      diyDom:{
        showModal:false
      },
      diyData: {
        orderNo:'',
        columns: [
 
           {
            title: '昵称',
             render: (h, params) => {
              return h('div', [
                h('p', params.row.realname||params.row.nickname||params.row.username)
              ])
             }
          },
          {
            title: '手机号',
           render: (h, params) => {
              return h('div', [
                h('p', params.row.phone),
              ])
             }
          },
          {
            title: '变动积分',
            key: 'score',
          },
          {
            title: '变动前',
            key: 'beforeScore',
          },
          {
            title: '变动后',
             key: 'afterScore',
          },
          {
            title: '变动类型',
            key: 'type',
            render: (h, params) => {
              return h('div', [
                h('p', params.row.type==1?'消费增加积分':params.row.type==2?'使用扣除积分':'退款返还积分'),
              ])
             }
          },
          {
            title: '备注',
            key: 'commend',
          }
        ]
      },
      apiData: {
        total: 0,
        infor:null,
        tableList: [{status:0,}], 
      }
    }      
  },
  methods: {
        // 分页
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    }, 
    getTableList(){
      this.$store.commit('setSpinShow', true)
      var opt = { ...this.search,...this.query }
      apiScoredetailList(opt).then((res) => {
        const {
          list,
          totalCount
        } = res.data
        
        this.apiData.tableList = list
        this.apiData.total = totalCount
      }).finally(() => this.$store.commit('setSpinShow', false))
    },

  },
   mounted () {
    this.query=this.$route.query
    this.getTableList()
  },
}
</script>

<style scoped lang="less">
.template{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.button-border{
  margin-right: 10px;
  
}
</style>
 